<template>
  <el-table-column
    :prop="prop"
    :key="Math.random()"
    :show-overflow-tooltip="showOverflowTooltip"
    :align="align || 'center'"
    :label="label"
    :width="width"
    :sortable="sortable ? 'custom' : false"
  >
    <template v-if="!children?.length" #default="scope">
      <component
        :is="
          useRenderIcon(toRaw(getVal(scope?.row, scope.$index)), {
            width: 20,
            color: 'black'
          })
        "
      />
    </template>
    <template v-for="(c, i) in children || []" :key="i">
      <component
        v-if="noHidden(c)"
        :is="ST_COLLECTION[getType(c)]"
        v-bind="c"
      />
    </template>
  </el-table-column>
</template>

<script lang="ts" setup name="lc-st-icon">
import { ITableColumn } from "../interface";
import { ST_COLLECTION } from "../index";
import { NzSafeAny } from "@/components/sf/type";
import { computed, toRaw } from "vue";
import { useRenderIcon } from "@/components/icon/src/hooks";
const props = defineProps<ITableColumn<Record<string, NzSafeAny>>>();
const isExists = (val: NzSafeAny) => {
  return !["", undefined, null].includes(val);
};
const getType = (c: ITableColumn) => {
  return c?.buttons?.length ? "handler" : c.type || "column";
};
const noHidden = computed(() => {
  return (c: ITableColumn) => {
    if (c.hidden) {
      return false;
    }
    return c.iff ? c.iff(c) : true;
  };
});
const getVal = (raw: Record<string, NzSafeAny>, index: number) => {
  const data = props.formatter
    ? props.formatter(raw, index)
    : raw?.[props.prop];

  return isExists(data) ? data : "-";
};
</script>
<style>
svg {
  display: inline;
}
</style>
../interface @/components/sf/types ../interface
